<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<#include "head.ftl" />
</head>
<body>
	<div class="body-box">
		<div class="rhead">
			<div class="rpos">当前位置: 店铺管理 - 管理者</div>
			<form class="ropt">
				<input type="button" value="返回"
					onclick="location.href='${st.domain}/store/list'" />
			</form>
			<div class="clear"></div>
		</div>
		<form id="form_member">
			<table width="100%" class="pn-ftable" cellpadding="2" cellspacing="1"
				border="0">
				<tr>
					<td width="10%" class="pn-flabel pn-flabel-h">店铺：</td>
					<td colspan="4" class="pn-fcontent">${store.name}
					</td>
				</tr>
				<tr style="height:30px;">
					<td class="pn-fcontent"></td>
					<td class="pn-fcontent">可选用户：
					<input type="text" id="searchWord" placeholder="用户名" >
					<input type="button" id="bt_search" value="查找">
					</td>
					<td class="pn-fcontent"></td>
					<td class="pn-fcontent">已选用户：</td>
				</tr>
				<tr>
					<td class="pn-fcontent"></td>
					<td class="pn-fcontent" style="width:301px;">
						<select id="srcList" multiple="multiple" style="width:300px;height:300px;">
						</select>
					</td>
					<td class="pn-fcontent">
						<button type="button" id="bt_mRight">&gt;</button><br>
						<button type="button" id="bt_mLeft">&lt;</button><br>
						<button type="button" id="bt_mRightAll">&gt;&gt;</button><br>
						<button type="button" id="bt_mLeftAll">&lt;&lt;</button><br>
					</td>
					<td class="pn-fcontent">
						<select id="destList" name="memberIds" multiple="multiple" style="width:300px;height:300px;">
							<#list store.members as member>
								<option value="${member.memberId}">${member.name}<#if member.realName??>[${member.realName}]</#if></option>
							</#list>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="4" class="pn-fbutton">
						<input type="hidden" name="storeId" value="${store.storeId}" />
						<input type="hidden" name="id" value="1" /> <input type="button" id="bt_submit" value="提交" /> &nbsp; 
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
	// 获取用户列表的请求路径
	var memberListPath = g_domain + "/member/list/json";
	// 设置角色的提交路径
	var memberDoPath = g_domain + "/store/addMemberDo/json";
	// 店铺列表页面地址
	var storeListPagePath = g_domain + "/store/list";
	
	loadMembers();
	
	// 事件:查找
	$("#bt_search").click(function() {
		loadMembers();
	});
	
	// 事件:移动
	$("[id^='bt_m']").click(function() {
		var type = $(this).attr("id").replace("bt_m", "");
		if (type == "Right") {// 选中右移
			$("#destList").append($("#srcList option:selected"));
		
		} else if (type == "Left") {// 选中左移
			$("#srcList").append($("#destList option:selected"));
			
		} else if (type == "RightAll") {// 全部右移
			$("#destList").append($("#srcList option"));
			
		} else if (type == "LeftAll") {// 全部左移
			$("#srcList").append($("#destList option"));
		}
	});
	
	// 事件：提交
	$("#bt_submit").click(function() {
		submitDo();
	});
	
	
	function loadMembers() {
		$.post(memberListPath, {searchWord: $("#searchWord").val()}, function(data) {
			if (data.status !== 0) {
				alert(data.message);
				return;
			}
			$("#srcList").html("");
			var list = data.result;
			if (!list) {
				$("#srcList").append("<optgroup label='查无记录'></optgroup>");
				return;
			}
			var $destOptions = $("#destList option");
			var isInDest = false;
			for (var i = 0; i< list.length; i++) {
				isInDest = false; 
				$destOptions.each(function() {
					if (parseInt($(this).val()) == parseInt(list[i].memberId)) {
						isInDest = true;
					}
				});
				// 不在已选列表中的才显示到可选列表
				if (!isInDest) {
					var name = list[i].name;
					if (list[i].realName) {
						name +="[" + list[i].realName + "]";
					}
					$("#srcList").append("<option value='" + list[i].memberId + "'>" + name + "</option>");
				}
				
			}
		});
	}
	
	function submitDo() {
		// 全选右边的,用于提交
		$("#destList option").prop("selected", true);
		$.post(memberDoPath, $("#form_member").serialize(), function(data) {
			alert(data.message);
			if (data.status !== 0) {
				return;
			}
			location.href = storeListPagePath;
		});
	}
	</script>
</body>
</html>